<template>
   <div class="classify-body">
       <ul>
           <li v-for="item in this.classifyList" v-bind:key="item.id">
               <div>
                   <i v-bind:class="item.classname"></i>
               </div>
               <p>{{item.title}}</p>
           </li>
       </ul>
   </div>
</template>
   
<script>
   export default {
       props: {
           classifyList:Array
       },
       data () {
           return {
               /*classifyList: [
                    {title: '美食',classname: 'iconfont iconmeishi2'},
                    {title: '猫眼电影',classname: 'iconfont icondianying1'},
                    {title: '酒店',classname: 'iconfont iconjiudian'},
                    {title: '休闲娱乐',classname: 'iconfont iconyinliao'},
                    {title: '外卖',classname: 'iconfont iconicon-test1'},
                    {title: 'KTV',classname: 'iconfont iconktvtianchong'},
                    {title: '周边游',classname: 'iconfont iconpaizhaomian'},
                    {title: '丽人',classname: 'iconfont iconnvsheng'},
                    {title: '小吃快餐',classname: 'iconfont iconxiaochi1'},
                    {title: '全部分类',classname: 'iconfont iconmore' }
                ]*/
           }
       }
   }
</script>
   
<style scoped lang="less">
   .classify-body{
       width: 100%;
       height: 4.4rem;
       background: white;
       ul{
           width: 100%;
           height: 100%;
           display: flex;/**弹性布局--默认不换行 */
           flex-wrap: wrap;/**手动添加换行 */
           li{
               width: 20%;
               list-style: none;/**去除列表标记项 */
               padding: .266667rem 0;
               div{
                   width: 1.066667rem;
                   height: 1.066667rem;
                   border-radius: 50%;
                   text-align: center;
                   line-height: 1.066667rem;
                   margin: auto;
                   i{
                       font-size: .666667rem;
                       color: #fff;
                   }
               }
               p{
                   text-align: center;
                   margin-top: .133333rem;
               }
                &:nth-of-type(1) div{
                    background: #fd9d21;
                }
                &:nth-of-type(2) div{
                    background: #ff6767;
                }
                &:nth-of-type(3) div{
                    background: #8a90fa;
                }
                &:nth-of-type(4) div{
                    background: #fed030;
                }
                &:nth-of-type(5) div{
                    background: #fd9d21;
                }
                &:nth-of-type(6) div{
                    background: #fed030;
                }
                &:nth-of-type(7) div{
                    background: #4dc6ee;
                }
                &:nth-of-type(8) div{
                    background: #ff80c2;
                }
                &:nth-of-type(9) div{
                    background: #fd9d21;
                }
                &:nth-of-type(10) div{
                    background: #00d3be;
                }
           }
       }
   }    
</style>